  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门列表展示</title>
    <!-- vue的核心库vue2.0 渲染数据-->
    <script src="https://cdn.staticfile.net/vue/2.2.2/vue.min.js"></script>
    <!-- axios库-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        #app table{
            border:solid 1px red;
            margin:0 auto;
            width: 700px;
            font-size:20px;
            border-collapse: collapse;
        }
        tr,td{
            border:solid 1px red;
        }
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <th>ID</th>
            <th>部门名称</th>
            <th>操作</th>
        </tr>
        <tr v-for="dept in detps" :key="dept.id">
            <td>{{dept.id}}</td>
            <td>{{dept.name}}</td>
            <td><button @click="deleteDept(dept.id)">删除</button></td>
        </tr>
    </table>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            detps:[] //渲染的数据
        },
        mounted(){//生命周期，当前页面完整加载之后执行
            this.loadDepts();
        },
        methods:{
            //加载部门列表
            loadDepts(){
                axios.get('http://localhost:8080/dept').then(
                    response=>{
                        this.detps =response.data.data;
                    }
                )
            },

            deleteDept(id){
                if(confirm("确定删除吗?")){
                    axios.delete(`http://localhost:8080/dept/${id}`).then(
                        ()=>this.loadDepts()
                    )
                }
            }
        }
    })
</script>
</body>
</html>